<template>

  <div class="div_register">
    <div style="display: inline-block;vertical-align: top">
      <img class="login_img" :src="imgUrl" alt="">
    </div>
    <div style="display: inline-block;vertical-align: top">
      <div>
        <div class="div_register_welcome">
          欢迎注册账号
        </div>
        <div class="div_register_goutou">
          每一天，乐在沟通。
        </div>
      </div>
      <div class="div_register_input_nikname">
        <el-input v-model="registerData.username" size="large" placeholder="昵称"/>
      </div>
      <div class="div_register_input_nikname">
        <el-input v-model="registerData.password" size="large" type="password" placeholder="密码"/>
      </div>
      <div class="div_register_input_nikname">
        <el-input v-model="registerData.email" size="large" placeholder="邮箱"/>
      </div>
      <div>
        <div class="div_register_input_yanzhengma" style="vertical-align: top">
          <el-input v-model="registerData.emailcode" size="large" placeholder="验证码"/>
        </div>
        <div class="div_register_button_yanzhengma" style="vertical-align: top">
          <el-button v-if="codetimeout>0" disabled @click="sendEmailCode" style="width: 180px" size="large"
                     type="primary">
            60秒之后重试 <p class="div_register_button_timeout">{{ codetimeout }}</p></el-button>
          <el-button v-if="codetimeout<=0" @click="sendEmailCode" style="width: 180px" size="large" type="primary">
            发送邮箱验证码
          </el-button>
          <div class="div_register_button_yz_weishoudao" @click="showRetrySendEmail">
            未收到(一天只能发送5次哦~)
          </div>
        </div>
      </div>
      <div class="div_register_button_register">
        <el-button @click="register" style="width: 300px" size="large" type="primary">立即注册</el-button>
      </div>

      <div class="div_register_text_have_account" @click="changePageToLogin">
        已有账号?
      </div>
      <div>
        <el-dialog v-model="dialogVisible" title="提示信息" width="30%" top="320px"
                   :before-close="dialogHandleClose">
          <div class="div_dialog_message">
            <span>重新发送邮件?</span>
          </div>
          <div class="div_dialog_button">
            <el-button class="div_dialog_button_cancel" @click="dialogVisible = false">取消</el-button>
            <el-button class="div_dialog_button_confirm" type="primary" @click="retrySendEmaliCode">确定
            </el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>

import {request} from '../util/httprequest'
import {WaterAudio} from "../util/audio"
import {Notification, AlertMessageBox} from '../util/notification'
import {Copy} from '../util/copy'


export default {
  name: "register",
  data() {
    return {
      imgUrl: "https://im-1303903194.cos.ap-beijing.myqcloud.com/01-1.jpg",
      password: "",
      codetimeout: 0,
      dialogVisible: false,
      account: "",
      registerData: {
        username: "",
        password: "",
        email: "",
        emailcode: "",
      },
    }
  },
  methods: {

    changePageToLogin() {
      // 修改状态.
      this.$store.commit('setWinState', 0)
    },

    // 发送邮箱验证码.
    sendEmailCode() {
      if (this.registerData.email === "") {
        // 提示.
        Notification("提示", "邮箱为空!", "error")
        return
      }

      if (!this.registerData.email.match(/^\w+@\w+\.\w+$/i)) {
        if (this.registerData.email !== "im.go@qq.com") {
          Notification("提示", "邮箱不合法,请重新输入!", "error")
          return
        }
      }
      this.timeout60()
      request("get", "/user/sendemail?email=" + this.registerData.email, this.registerData).then((response) => {
        if (response.data.code === 0) {
          Notification("提示", response.data.data, "success")
        } else {
          Notification("提示", response.data.msg, "error")
        }
        // 声音提示.
        WaterAudio()
      })
    },

    // 账号注册.
    register() {
      // 参数校验.
      request("post", "/user/register", this.registerData).then((response) => {
        if (response.data.code === 0) {
          // 注册成功.
          this.account = response.data.data
          let content = `<b>您的专属账号为: </b> <span style="color: red;margin-left: 20px">` + response.data.data + `</span>  `
          AlertMessageBox("恭喜,注册成功!", content, () => {
            Copy(response.data.data)
            Notification("提示", "复制成功: " + response.data.data, "success")
            // 修改为登录状态.
            this.$store.commit('setWinState', 0)
          })
          Notification("提示", response.data.msg, "success")
        } else {
          // 其实是能获取到account的.
          Notification("提示", response.data.msg, "error")
        }
      })
    },

    timeout60() {
      this.codetimeout = 60
      let interval = window.setInterval(() => {
        this.codetimeout--
      }, 1000)
      // 设置65S关闭.
      setTimeout(() => {
        console.log("setTimeout....")
        window.clearInterval(interval)
      }, 62000)
    },

    showRetrySendEmail() {
      // 弹出框确定重新发送.
      this.dialogVisible = true
    },

    retrySendEmaliCode() {
      this.dialogVisible = false
      // 重新发送.
      this.sendEmailCode()
    },

    dialogHandleClose() {
      this.dialogVisible = false
    },

    timeoutB() {
      setTimeout(() => {
        this.imgUrl = "https://im-1303903194.cos.ap-beijing.myqcloud.com/01-2.jpg"
        this.timeoutC()
      }, 5000)
    },
    timeoutC() {
      setTimeout(() => {
        this.imgUrl = "https://im-1303903194.cos.ap-beijing.myqcloud.com/01-1.jpg"
        this.timeoutB()
      }, 5000)
    },
  },
  mounted() {
    this.timeoutB()
  }
}
</script>

<style scoped>

.div_register {
  vertical-align: top;
}

.login_img {
  height: 900px;
  margin-left: -8px;
  margin-top: -8px;
}

.div_register_welcome {
  margin-left: 270px;
  margin-top: 225px;
  font-size: 22px;
  font-weight: 800;
}

.div_register_goutou {
  margin-left: 270px;
  margin-top: 10px;
  font-weight: 600;
}

.div_register_input_nikname {
  width: 300px;
  margin-left: 270px;
  margin-top: 30px;
}

.div_register_input_yanzhengma {
  display: inline-block;
  width: 100px;
  margin-left: 270px;
  margin-top: 32px;
}

.div_register_button_yanzhengma {
  display: inline-block;
  margin-top: 30px;
  margin-left: 20px;
}

/*注册按钮DIV*/
.div_register_button_register {
  margin-left: 270px;
  margin-top: 14px;
}

.div_register_text_have_account {
  width: 75px;
  margin-left: 270px;
  margin-top: 10px;
  font-size: 16px;
  color: #0984e3;
}

div[class="div_register_text_have_account"]:hover {
  cursor: pointer;
}

.div_register_button_timeout {
  color: #8c7ae6;
  margin-left: 10px;
  font-weight: 700;
}

/*未收到文字DIV.*/
.div_register_button_yz_weishoudao {
  font-size: 14px;
  margin-top: 2px;
  color: #0984e3;
}

div[class="div_register_button_yz_weishoudao"]:hover {
  cursor: pointer;
}

.div_dialog_message {
  margin-top: -30px;
  font-weight: 500;
}

.div_dialog_button {
  margin-top: 15px;
  margin-bottom: -20px;
  margin-left: 240px;
}

.div_dialog_button_cancel {
}

.div_dialog_button_confirm {
  margin-left: 15px;
}

</style>